import {
  QueryFilter,
  Toolbar,
  FileUpload,
  SearchPage,
  useAntdList,
} from "@web-design/ui";
import { SearchPageInstance } from "@web-design/ui/src/SearchPage";
import {
  Button,
  Card,
  DatePicker,
  Form,
  Modal,
  Select,
  Space,
  Table,
} from "antd";
import React, { useEffect } from "react";

const query = (a): any => {
  return new Promise((r) => {
    setTimeout(() => {
      r({
        total: 100,
        records: [{}],
      });
    }, 100);
  });
};

const App = () => {
  const [form] = Form.useForm();
  const columns = [
    {
      title: "商品名称",
      // hidden2: true,
      dataIndex: "name1",
    },
    {
      title: "商家名称",
      // hidden: true,
      dataIndex: "name2",
    },
    {
      title: "订单号",
      dataIndex: "name3",
    },
    {
      title: "订单号",
      dataIndex: "name33",
    },
    {
      title: "状态",
      // enumValue: {
      //   1: "测试",
      // },
      dataIndex: "status",
    },
    {
      title: "更新时间",
      dataIndex: "name5",
    },
  ];

  const { tableProps, run, search } = useAntdList(query, {
    form,
    manual: true,
  });
  useEffect(() => {
    run({ sss: "sss" });
  }, []);
  const { run: run2 } = useAntdList(query, { form, manual: true });
  useEffect(() => {
    console.log("dev_micro_app: home useEffect");
    return () => {
      console.log("dev_micro_app: home UnuseEffect");
    };
    //   @ts-ignore
    // run({sss:'sss'})
    // run2()
  }, []);
  console.log("aaaaaa", tableProps);
  const items = [
    {
      name: "name",
      label: "集合编号",
      type: "input",
      placeholder: "请输入姓名",
      // rules: [{ required: true, message: "请输入姓名" }],
    },
    {
      name: "age1",
      label: "集合名称",
      type: "input",
      placeholder: "请输入年龄",
    },
    {
      name: "age2",
      label: "内容体裁",
      type: "input",
      placeholder: "请输入年龄",
    },
    {
      name: "age3",
      label: "筛选方式",
      type: "input",
      placeholder: "请输入年龄",
    },
    {
      name: "age222",
      label: "创建时间",
      type: "input",
      children: <DatePicker.RangePicker />,
      placeholder: "请输入年龄",
    },
    {
      name: "age11",
      label: "状态",
      type: "input",
      children: <Select />,
      placeholder: "请输入年龄",
    },
  ];
  const searchPage = React.useRef<SearchPageInstance>(null)
  return (
    <SearchPage
    ref={searchPage}
      table={{
        columns,
      }}
      tabs={{
        tabBarExtraContent:<Button onClick={()=>searchPage.current.refresh()}>刷新</Button>,
        tabsKey:'status',
        defaultTabsActiveKey:'sss2',
        items: [
          {
            label: "sss",
            key: "sss",
          },
          {
            label: "sss2",
            key: "sss2",
          },
        ],
      }}
      queryFilter={{
        items: [
          {
            name: "age2",
            label: "状态",
          },
          {
            name: "age3",
            label: "状态",
          },
          {
            name: "age24",
            label: "状态",
          },
        ],
      }}
      request={query}
    />
  );
  return (
    <Card size="small">
      <QueryFilter form={form} items={items} {...search} />
      {/* <QueryFilter
        items={[
          {
            name: "age2",
            label: "状态",
          },
          {
            name: "age3",
            label: "状态",
          },
          {
            name: "age24",
            label: "状态",
          },
        ]}
      /> */}
      {/* <QueryFilter layout="inline" items={items} /> */}

      {/* <Table
       {...tableProps}
        columns={[
          {
            title: "商品名称",
            hidden2: true,
            dataIndex: "name1",
          },
          {
            title: "商家名称",
            hidden: true,
            dataIndex: "name2",
          },
          {
            title: "订单号",
            dataIndex: "name3",
          },
          {
            title: "订单号",
            dataIndex: "name33",
          },
          {
            title: "状态",
            enumValue: {
              1: "测试",
            },
            dataIndex: "status",
          },
          {
            title: "更新时间",
            dataIndex: "name5",
          },
        ]}
      /> */}
      <Toolbar
        right={
          <Space>
            <Button>下载订单</Button>
            <Button>下载订单</Button>
            <Button>下载订单</Button>
            <Button>下载订单</Button>
            <Button>下载订单</Button>
            <Button>批量操作</Button>
          </Space>
        }
        left={
          <Space>
            <Button loading>创建</Button>
            <Button
              danger
              onClick={() =>
                Modal.info({ title: "ss", closable: true, content: "sss" })
              }
            >
              danger
            </Button>
            <Button
              disabled
              onClick={() => Modal.confirm({ title: "ss", content: "sss" })}
            >
              创建
            </Button>
            <Button type="primary">创建</Button>
            <Button type="primary" disabled>
              创建
            </Button>
            <Button type="link" disabled>
              创建
            </Button>
            <Button>创建</Button>
          </Space>
        }
      >
        sss
      </Toolbar>
      {/* <Form
        form={form}
        initialValues={{
          aaa: "https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png",
        }}
      >
        <Form.Item name="aaa">
          <FileUpload.Dragger maxCount={2} fileName="手术室">
            <Button>上传</Button>
          </FileUpload.Dragger>
        </Form.Item>
      </Form> */}

      <Table
        columns={[
          {
            title: "商品名称",
            // hidden2: true,
            dataIndex: "name1",
          },
          {
            title: "商家名称",
            // hidden: true,
            dataIndex: "name2",
          },
          {
            title: "订单号",
            dataIndex: "name3",
          },
          {
            title: "订单号",
            dataIndex: "name33",
          },
          {
            title: "状态",
            // enumValue: {
            //   1: "测试",
            // },
            dataIndex: "status",
          },
          {
            title: "更新时间",
            dataIndex: "name5",
          },
        ]}
        {...tableProps}
        pagination={{
          total: 1000000,
        }}
        dataSource={[{ name2: "sss" }]}
      />
    </Card>
  );
};
export default App;
